<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2638023" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ea;</span>
                <div class="name">导出</div>
                <div class="code-name">&amp;#xe7ea;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">批量下载</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62f;</span>
                <div class="name">批量添加</div>
                <div class="code-name">&amp;#xe62f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe78c;</span>
                <div class="name">批量下载</div>
                <div class="code-name">&amp;#xe78c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe80a;</span>
                <div class="name">批量下载</div>
                <div class="code-name">&amp;#xe80a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">导出</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">导入</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe641;</span>
                <div class="name">系统导出</div>
                <div class="code-name">&amp;#xe641;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe744;</span>
                <div class="name">导入</div>
                <div class="code-name">&amp;#xe744;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe808;</span>
                <div class="name">批量导出</div>
                <div class="code-name">&amp;#xe808;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe809;</span>
                <div class="name">批量导入</div>
                <div class="code-name">&amp;#xe809;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe628;</span>
                <div class="name">导入</div>
                <div class="code-name">&amp;#xe628;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61e;</span>
                <div class="name">发布</div>
                <div class="code-name">&amp;#xe61e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb88;</span>
                <div class="name">icon_发布</div>
                <div class="code-name">&amp;#xeb88;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">发布</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe642;</span>
                <div class="name">发布</div>
                <div class="code-name">&amp;#xe642;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe626;</span>
                <div class="name">保存</div>
                <div class="code-name">&amp;#xe626;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe66b;</span>
                <div class="name">保存</div>
                <div class="code-name">&amp;#xe66b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">保存</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe6ac;</span>
                <div class="name">最大不平衡</div>
                <div class="code-name">&amp;#xe6ac;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xee18;</span>
                <div class="name">获取许可</div>
                <div class="code-name">&amp;#xee18;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe673;</span>
                <div class="name">强力</div>
                <div class="code-name">&amp;#xe673;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe639;</span>
                <div class="name">推力</div>
                <div class="code-name">&amp;#xe639;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe789;</span>
                <div class="name">应变</div>
                <div class="code-name">&amp;#xe789;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe708;</span>
                <div class="name">应力计</div>
                <div class="code-name">&amp;#xe708;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe670;</span>
                <div class="name">安全_填充</div>
                <div class="code-name">&amp;#xe670;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe88c;</span>
                <div class="name">09安全、保障</div>
                <div class="code-name">&amp;#xe88c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeaef;</span>
                <div class="name">安全</div>
                <div class="code-name">&amp;#xeaef;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xeb71;</span>
                <div class="name">安全_o</div>
                <div class="code-name">&amp;#xeb71;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xec4d;</span>
                <div class="name">安全</div>
                <div class="code-name">&amp;#xec4d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe718;</span>
                <div class="name">安全</div>
                <div class="code-name">&amp;#xe718;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">通知</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62a;</span>
                <div class="name">圆</div>
                <div class="code-name">&amp;#xe62a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">圆</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xedf8;</span>
                <div class="name">圆</div>
                <div class="code-name">&amp;#xedf8;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: 
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1673414721343') format('woff'),
       url('iconfont.ttf?t=1673414721343') format('truetype');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-daochu1"></span>
            <div class="name">
              导出
            </div>
            <div class="code-name">.icon-daochu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-piliangxiazai"></span>
            <div class="name">
              批量下载
            </div>
            <div class="code-name">.icon-piliangxiazai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-piliangtianjia"></span>
            <div class="name">
              批量添加
            </div>
            <div class="code-name">.icon-piliangtianjia
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-batch-download"></span>
            <div class="name">
              批量下载
            </div>
            <div class="code-name">.icon-batch-download
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-piliangxiazai1"></span>
            <div class="name">
              批量下载
            </div>
            <div class="code-name">.icon-piliangxiazai1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daochu"></span>
            <div class="name">
              导出
            </div>
            <div class="code-name">.icon-daochu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daoru1"></span>
            <div class="name">
              导入
            </div>
            <div class="code-name">.icon-daoru1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xitongdaochu"></span>
            <div class="name">
              系统导出
            </div>
            <div class="code-name">.icon-xitongdaochu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daoru2"></span>
            <div class="name">
              导入
            </div>
            <div class="code-name">.icon-daoru2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-piliangdaochu"></span>
            <div class="name">
              批量导出
            </div>
            <div class="code-name">.icon-piliangdaochu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-piliangdaoru"></span>
            <div class="name">
              批量导入
            </div>
            <div class="code-name">.icon-piliangdaoru
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-daoru"></span>
            <div class="name">
              导入
            </div>
            <div class="code-name">.icon-daoru
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-release"></span>
            <div class="name">
              发布
            </div>
            <div class="code-name">.icon-release
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fabu2"></span>
            <div class="name">
              icon_发布
            </div>
            <div class="code-name">.icon-fabu2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fabu"></span>
            <div class="name">
              发布
            </div>
            <div class="code-name">.icon-fabu
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fabu1"></span>
            <div class="name">
              发布
            </div>
            <div class="code-name">.icon-fabu1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baocun"></span>
            <div class="name">
              保存
            </div>
            <div class="code-name">.icon-baocun
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baocun1"></span>
            <div class="name">
              保存
            </div>
            <div class="code-name">.icon-baocun1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-baocun2"></span>
            <div class="name">
              保存
            </div>
            <div class="code-name">.icon-baocun2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zuidabupingheng"></span>
            <div class="name">
              最大不平衡
            </div>
            <div class="code-name">.icon-zuidabupingheng
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-huoquxuke"></span>
            <div class="name">
              获取许可
            </div>
            <div class="code-name">.icon-huoquxuke
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qiangli"></span>
            <div class="name">
              强力
            </div>
            <div class="code-name">.icon-qiangli
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-push"></span>
            <div class="name">
              推力
            </div>
            <div class="code-name">.icon-push
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingbian"></span>
            <div class="name">
              应变
            </div>
            <div class="code-name">.icon-yingbian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yingliji"></span>
            <div class="name">
              应力计
            </div>
            <div class="code-name">.icon-yingliji
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquantianchong"></span>
            <div class="name">
              安全_填充
            </div>
            <div class="code-name">.icon-anquantianchong
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquanbaozhang"></span>
            <div class="name">
              09安全、保障
            </div>
            <div class="code-name">.icon-anquanbaozhang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquan"></span>
            <div class="name">
              安全
            </div>
            <div class="code-name">.icon-anquan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquan3"></span>
            <div class="name">
              安全_o
            </div>
            <div class="code-name">.icon-anquan3
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquan1"></span>
            <div class="name">
              安全
            </div>
            <div class="code-name">.icon-anquan1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-anquan2"></span>
            <div class="name">
              安全
            </div>
            <div class="code-name">.icon-anquan2
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tongzhi"></span>
            <div class="name">
              通知
            </div>
            <div class="code-name">.icon-tongzhi
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-rough-circle"></span>
            <div class="name">
              圆
            </div>
            <div class="code-name">.icon-rough-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-big-circle"></span>
            <div class="name">
              圆
            </div>
            <div class="code-name">.icon-big-circle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuan"></span>
            <div class="name">
              圆
            </div>
            <div class="code-name">.icon-yuan
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daochu1"></use>
                </svg>
                <div class="name">导出</div>
                <div class="code-name">#icon-daochu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-piliangxiazai"></use>
                </svg>
                <div class="name">批量下载</div>
                <div class="code-name">#icon-piliangxiazai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-piliangtianjia"></use>
                </svg>
                <div class="name">批量添加</div>
                <div class="code-name">#icon-piliangtianjia</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-batch-download"></use>
                </svg>
                <div class="name">批量下载</div>
                <div class="code-name">#icon-batch-download</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-piliangxiazai1"></use>
                </svg>
                <div class="name">批量下载</div>
                <div class="code-name">#icon-piliangxiazai1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daochu"></use>
                </svg>
                <div class="name">导出</div>
                <div class="code-name">#icon-daochu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daoru1"></use>
                </svg>
                <div class="name">导入</div>
                <div class="code-name">#icon-daoru1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xitongdaochu"></use>
                </svg>
                <div class="name">系统导出</div>
                <div class="code-name">#icon-xitongdaochu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daoru2"></use>
                </svg>
                <div class="name">导入</div>
                <div class="code-name">#icon-daoru2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-piliangdaochu"></use>
                </svg>
                <div class="name">批量导出</div>
                <div class="code-name">#icon-piliangdaochu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-piliangdaoru"></use>
                </svg>
                <div class="name">批量导入</div>
                <div class="code-name">#icon-piliangdaoru</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-daoru"></use>
                </svg>
                <div class="name">导入</div>
                <div class="code-name">#icon-daoru</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-release"></use>
                </svg>
                <div class="name">发布</div>
                <div class="code-name">#icon-release</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fabu2"></use>
                </svg>
                <div class="name">icon_发布</div>
                <div class="code-name">#icon-fabu2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fabu"></use>
                </svg>
                <div class="name">发布</div>
                <div class="code-name">#icon-fabu</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fabu1"></use>
                </svg>
                <div class="name">发布</div>
                <div class="code-name">#icon-fabu1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baocun"></use>
                </svg>
                <div class="name">保存</div>
                <div class="code-name">#icon-baocun</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baocun1"></use>
                </svg>
                <div class="name">保存</div>
                <div class="code-name">#icon-baocun1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-baocun2"></use>
                </svg>
                <div class="name">保存</div>
                <div class="code-name">#icon-baocun2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zuidabupingheng"></use>
                </svg>
                <div class="name">最大不平衡</div>
                <div class="code-name">#icon-zuidabupingheng</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-huoquxuke"></use>
                </svg>
                <div class="name">获取许可</div>
                <div class="code-name">#icon-huoquxuke</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qiangli"></use>
                </svg>
                <div class="name">强力</div>
                <div class="code-name">#icon-qiangli</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-push"></use>
                </svg>
                <div class="name">推力</div>
                <div class="code-name">#icon-push</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingbian"></use>
                </svg>
                <div class="name">应变</div>
                <div class="code-name">#icon-yingbian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yingliji"></use>
                </svg>
                <div class="name">应力计</div>
                <div class="code-name">#icon-yingliji</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquantianchong"></use>
                </svg>
                <div class="name">安全_填充</div>
                <div class="code-name">#icon-anquantianchong</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquanbaozhang"></use>
                </svg>
                <div class="name">09安全、保障</div>
                <div class="code-name">#icon-anquanbaozhang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquan"></use>
                </svg>
                <div class="name">安全</div>
                <div class="code-name">#icon-anquan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquan3"></use>
                </svg>
                <div class="name">安全_o</div>
                <div class="code-name">#icon-anquan3</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquan1"></use>
                </svg>
                <div class="name">安全</div>
                <div class="code-name">#icon-anquan1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-anquan2"></use>
                </svg>
                <div class="name">安全</div>
                <div class="code-name">#icon-anquan2</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tongzhi"></use>
                </svg>
                <div class="name">通知</div>
                <div class="code-name">#icon-tongzhi</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-rough-circle"></use>
                </svg>
                <div class="name">圆</div>
                <div class="code-name">#icon-rough-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-big-circle"></use>
                </svg>
                <div class="name">圆</div>
                <div class="code-name">#icon-big-circle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuan"></use>
                </svg>
                <div class="name">圆</div>
                <div class="code-name">#icon-yuan</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
